<template>
  <div class="order_data table-theme">
    <head-title title="订单--套餐订单"></head-title>
    <div class="order-list-data table-theme">
      <div class="order-list-data-view">
        <div class="order-top-menu">
          <div class="order-menu-left">
            <div class="date-select-view">
              <el-select
                v-model="OrderGroupGoodsVal.year"
                placeholder="年份"
                @change="getOrderGroupGoods"
              >
                <el-option
                  v-for="item in orderOptions.yearOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>

            <div class="date-select-view">
              <el-select
                v-model="OrderGroupGoodsVal.month"
                placeholder="月份"
                @change="getOrderGroupGoods"
              >
                <el-option
                  v-for="item in orderOptions.monthOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
             <!-- <el-date-picker
              v-model="value2"
              value-format="yyyy-MM"
              type="month"
              placeholder="选择月"
              :default-value="new Date()"
              @change="getMonth">
            </el-date-picker> -->
          </div>

          <div class="order-menu-right">
            <refresh-button @refresh="refreshPageGroup"></refresh-button>
          </div>
        </div>
        <p class="data-number"><span style="margin-right: 30px;">总零售价:{{retail_price}}</span>总自营价：{{self_price}}</p>
        <el-table :data="OrderGroupGoodsList" stripe>
          <el-table-column label="序号" align="center" prop="" width="80">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            label="id"
            align="center"
            prop="order_id"
            width="80"
          ></el-table-column>
          <el-table-column
            label="编号"
            align="center"
            prop="goods_id"
          ></el-table-column>
          <el-table-column
            label="数量"
            align="center"
            prop="goods_number"
          ></el-table-column>
          <el-table-column
            label="零售价"
            align="center"
            prop="goods_price"
          ></el-table-column>
          <el-table-column
            label="自营价"
            align="center"
            prop="goods_self_price"
          ></el-table-column>
          <el-table-column
            label="sku编号"
            align="center"
            prop="sku_sn"
          ></el-table-column>
          <el-table-column
            label="商品名称"
            align="center"
            prop="goods_name"
          ></el-table-column>
          <el-table-column
            label="订单编号"
            align="center"
            prop="order_sn"
          ></el-table-column>
          <el-table-column
            label="套餐编号"
            align="center"
            prop="group_id"
          ></el-table-column>
          <el-table-column
            label="套餐名称"
            align="center"
            prop="group_name"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        orderOptions: {
				yearOptions: [
					{
						value: '2018',
						label: '2018'
					},
					{
						value: '2019',
						label: '2019'
					},
					{
						value: '2020',
						label: '2020'
					},
          {
            value: '2021',
            label: '2021'
          },
          {
            value: '2022',
            label: '2022'
          },
          {
            value: '2023',
            label: '2023'
          },
          {
            value: '2024',
            label: '2024'
          },
          {
            value: '2025',
            label: '2025'
          }
				],
				monthOptions: [
					{
						value: '01',
						label: '01'
					},
					{
						value: '02',
						label: '02'
					},
					{
						value: '03',
						label: '03'
					},
					{
						value: '04',
						label: '04'
					},
					{
						value: '05',
						label: '05'
					},
					{
						value: '06',
						label: '06'
					},
					{
						value: '07',
						label: '07'
					},
					{
						value: '08',
						label: '08'
					},
					{
						value: '09',
						label: '09'
					},
					{
						value: '10',
						label: '10'
					},
					{
						value: '11',
						label: '11'
					},
					{
						value: '12',
						label: '12'
					}
				]
			},
      OrderGroupGoodsVal: {
        year: "",
        month: ""
      },
      retail_price:0,
      self_price:0,
      OrderGroupGoodsList: [],
    };
  },
  methods: {
    // 获取当前日期
    getDate() {
      let date = new Date();
      this.OrderGroupGoodsVal.month ='01'
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      this.OrderGroupGoodsVal.year = date.getFullYear();
    },
    // 获取订单套餐商品
    getOrderGroupGoods(e) {
      // 获取当前月份
      let data = {
        year: this.OrderGroupGoodsVal.year,
        month: this.OrderGroupGoodsVal.month
      };
      const loading = this.$loading({
        lock:false,
        text:'加载中....',
        spinner:'el-icon-loading',
        background:'rgba(0,0,0,0)'
      })
      this.$http(this.$ApiList.OrderGroupGoods, data).then((res) => {
        this.OrderGroupGoodsList = res.datas.data;
        this.retail_price = res.datas.retail_price;
        this.self_price = res.datas.self_price;
        loading.close();
      });
    },
    // 刷新订单套餐
    refreshPageGroup() {
      this.OrderGroupGoodsVal.page = 1;
      this.getDate();
      this.getOrderGroupGoods();
    },
    // getMonth(e){
    //   const date = e.split('-');
    //   this.OrderGroupGoodsVal.year = date[0]
    //   this.OrderGroupGoodsVal.month = date[1]
    //   this.getOrderGroupGoods()
    // }
  },
  created() {
    this.getDate();
    this.getOrderGroupGoods();
  },
};
</script>

<style lang="scss" scoped>
.order_data .order-top-menu {
	display: flex;
}
.order_data .refresh-btn {
	margin-left: 10px;
}
.order-list-data {
	margin-top: 20px;
}
.order-list-data-view {
	padding: 20px 20px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.14);
}
.order_data .order-top-menu {
	display: flex;
}
.order_data .refresh-btn {
	margin-left: 10px;
}
.order-menu-left {
	flex: 1;
	display: flex;
}
.order-menu-right {
	flex: 2;
	display: flex;
	flex-direction: row-reverse;
}

.date-select-view {
	margin-right: 10px;
	width: 120px;
}

.order-top-menu .input-with-select .el-input-group__prepend {
	width: 110px;
	background-color: #fff;
}
.order-top-menu .input-with-select .el-input__inner:nth-child(2) {
	width: 150px;
	padding-right: 15px;
}

</style>